<div class="lottery relative">
  @if (content.text) {
    <app-text [content]="content.text" />
  }
  <div class="inner grid grid-cols-12 justify-center items-center">
    <app-formly
      class="m-y p-x-sm col-span-12 md:col-span-5"
      [fields]="content.form"
      [form]="form"
      [model]="model"
      (modelChange)="onFormlyChange($event)"
    />
    <div class="flex flex-col col-span-12 md:col-span-7">
      <div class="result p-x-sm p-y grid grid-cols-12 justify-between items-center">
        <div class="left flex flex-col col-span-12 md:col-span-6 justify-center items-center">
          <h2>红包大约需要总预算</h2>
          <h1 class="total p-y-sm">
            ¥<span>{{ total }}</span>
          </h1>
          <div class="result-footer text-center flex flex-wrap gap-5">
            @if (model?.max?.total_number) {
              <div class="item flex flex-col">
                <span class="label">大额红包预算</span>
                <span class="value">{{ model.max.total_money }}元</span>
              </div>
            }
            @if (model?.min?.total_number) {
              <div class="item flex flex-col">
                <span class="label">小额红包预算</span>
                <span class="value">{{ minTotalMoney }}元</span>
              </div>
            }
            @if (model.isPromote) {
              <div class="item flex flex-col">
                <span class="label">推广占用金额</span>
                <span class="value">{{ promoteMoney }}元</span>
              </div>
            }
          </div>
        </div>
        <div class="right col-span-12 md:col-span-6">
          @if (chart) {
            <app-chart [content]="chart" [data]="content.data" />
          }
        </div>
      </div>
      @if (content.description) {
        <div
          class="description m-y-sm col-span-12"
          [innerHTML]="content.description | safeHtml"
        ></div>
      }
    </div>
  </div>
</div>
